<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v4.0.1">
    <title>Dashboard</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/dashboard/">

    <!-- Bootstrap core CSS -->
<link href="/assets/dist/css/bootstrap.css" rel="stylesheet">


    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>
    <!-- Custom styles for this template -->
    <link th:href="@{/tcr/dashboard.css}" rel="stylesheet">
  </head>
  <body>
  <div th:replace="common/bar::topbar"></div>

<div class="container-fluid">
  <div class="row">
   <div th:replace="common/bar::sidebar(activeUri='main')"></div>

    <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
      <!--<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">-->
        <!--<h1 class="h2">Dashboard</h1>-->
        <!--<div class="btn-toolbar mb-2 mb-md-0">-->
          <!--<div class="btn-group mr-2">-->
            <!--<button type="button" class="btn btn-sm btn-outline-secondary">Share</button>-->
            <!--<button type="button" class="btn btn-sm btn-outline-secondary">Export</button>-->
          <!--</div>-->
          <!--<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">-->
            <!--<span data-feather="calendar"></span>-->
            <!--This week-->
          <!--</button>-->
        <!--</div>-->
      <!--</div>-->
        <br>
        <select id="querySelects" name="id">

        </select>
      <button class="btn btn-success" type="button" id="query">查询</button>
    <div class="row-cols-12">
    <form class="form-horizontal" method="post" id="queryForm">
      <input type="hidden" name="_method" value="put">
      <input type="hidden" name="id">
      <div class="form-group">
        <label for="inputName" class="col-sm-2 control-label">Name</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="inputName" name="name" readonly placeholder="Name" th:value="${student!=null}?${student.getName()}">
        </div>
      </div>
          <div class="form-group">
        <label for="inputPhone" class="col-sm-2 control-label">Phone</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" name="phone" id="inputPhone" readonly placeholder="Phone" th:value="${student!=null}?${student.getPhone()}">
        </div>
      </div>
      <div class="form-group">
            <label for="inputPhone" class="col-sm-2 control-label radio-inline">Sex</label>
            <div class="col-sm-10">
              <input  class="form-control" name="sex" type="text" readonly th:text="${student!=null}?${student.getSex()}" placeholder="性别">
            </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <div class="checkbox">
            <label>
              EnterDate<br>
              <input type="date" readonly class="form-control" th:name="enterDate" th:value="${student!=null}?${student.getEnterDate()}:''">
                     <!--th:value="${student!=null}?${#dates.format(student.getEnterDate(),'yyyy-MM-dd')}">-->
            </label>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">

          <button type="submit" class="btn btn-sm btn-info"><span style="color: white" th:text="绑定"></span></button>
        </div>
      </div>
    </form>
    </div>

    </main>
  </div>
    <script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}">

    </script>
    <script type="text/javascript" th:inline="javascript">

        var noBindings  = null;
        $(function () {
            $.ajax({
                url: "/index/noBindings",
                success: function (data) {
                    noBindings = data;
                    console.log(data)
                    for (var i = 0; i < noBindings.length; i++) {
                        $("#querySelects").append('<option value="'+i+'">'+noBindings[i].name+'</option>')
                    }
                }
            })
        })
        $("#query").click(function () {
            console.log( $("#querySelects").val())
            $("#queryForm").find("[name]").each(function () {
                var type = $(this)[0].nodeName.toLowerCase();
                var name = $(this).attr("name");
                if(name=='_method'){
                    return;
                }
                console.log(type+"  "+name);
                var newValue = noBindings[$("#querySelects").val()][name];
                $(type+"[name="+name+"]").val(newValue)
            })
            $("#queryForm").attr("action","/index/binding/"+$("#queryForm input[name=id]").val());
        })
    </script>
</div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.9.0/feather.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
        <script src="/tcr/dashboard.js"></script></body>
</html>
